<template>
	<view class="content">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="list" v-for="(item,index) in appointmentList" :key="index">
			<view class="top row">
				<view class="address fill">{{item.address}}</view>
				<view class="status">
					<text v-if="item.status==1">待分配</text>
					<text class="blue" v-else-if="item.status==2">跟进中</text>
					<text class="green" v-else-if="item.status==3">已完成</text>
					<text v-else>--</text>
				</view>
			</view>
			<view class="area">{{item.layoutNeed}}</view>
			<view class="time">预约时间：{{$filters.formatDate(item.reserveDate,'YYYY-MM-DD')}} <text v-if="item.reserveTimeStart">{{item.reserveTimeStart}}-{{item.reserveTimeEnd}}</text></view>
			<view class="remark">申请备注：{{item.remark}}</view>
			<view class="btnBox row">
				<view class="time fill">申请时间：{{$filters.formatDate(item.createTime)}}</view>
				<view class="btn" v-if="item.status==1" @click="cancleHandle(item)">取消预约</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useStore } from "vuex"
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { reserveGet,reserveCancel } from '@/common/API/room'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
const store = useStore()

let appointmentList = ref([])
/*上拉加载的回调*/
const upCallback = async (mescroll)=>{
	console.log(mescroll)
	let data = {
		mobile: uni.getStorageSync('userPhone'),
		pageSize: mescroll.size,
		pageNo: mescroll.num
	}
	let res = await reserveGet(data)
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) appointmentList.value = [];
	appointmentList.value = appointmentList.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	appointmentList.value = [];
	downCallback()
}

const cancleHandle = async (item)=>{
	uni.showModal({
		title: '提示',
		content: `确定要取消此预约吗？`,
		success: (res) => {
			if(res.confirm){
				reserveCancel({
					reserveTicketId: item.id
				}).then(()=>{
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					resetScroll()
				})
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.content{
	padding: 24rpx 0;
	min-height: 100vh;
	background: #fff;
	.list{
		width: 686rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 0 auto 16rpx;
		padding: 32rpx;
		box-shadow: 0px 0px 16rpx  rgba(0, 0, 0, 0.08);
		.top{
			.address{
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.status{
				margin-left: 20rpx;
			}
		}
		.area{
			.label{
				background: #DAE7FE;
				color: #4469AB;
				padding: 0 8rpx;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
		.btnBox{
			border-top: 2rpx solid #f5f5f5;
			margin-top: 10rpx;
			padding-top: 10rpx;
			.time{
				font-size: 24rpx;
				color: #666;
				.txt{
					margin-left: 10rpx;
				}
			}
			.btn{
				color: $uni-color-primary;
				font-size: 24rpx;
			}
		}
	}
}
</style>
